<template>
  <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
    <el-tab-pane label="按天设定" name="first">
      <div class="die">
        <h4>第一时间段</h4>
        <el-time-select
          placeholder="起始时间"
          v-model="startTime1"
          @focus="forbid"
          :editable="false"
          :popper-append-to-body='false'
          popper-class ="xiala"
          :picker-options="{
              start: '00:00',
              step: '00:15',
              end: '24:00'
            }"
          @change="changeTime($event,'0')"
        ></el-time-select>
        <el-time-select
          placeholder="结束时间"
          v-model="endTime1"
          @focus="forbid"
          :editable="false"
          :picker-options="{
            start: '00:00',
            step: '00:15',
            end: '24:00',
            minTime: startTime1
          }"
          @change="changeTime($event,'1')"
        ></el-time-select>
      </div>
      <div>
        <h4>第二时间段</h4>
        <el-time-select
          placeholder="起始时间"
          v-model="startTime2"
          @focus="forbid"
          :editable="false"
          :picker-options="{
              start: endTime1,
              step: '00:15',
              end: '24:00'
            }"
          @change="changeTime($event,'2')"
        ></el-time-select>
        <el-time-select
          placeholder="结束时间"
          v-model="endTime2"
          @focus="forbid"
          :editable="false"
          :picker-options="{
            start: startTime2,
            step: '00:15',
            end: '24:00',
            minTime: startTime2
          }"
          @change="changeTime($event,'3')"
        ></el-time-select>
      </div>
      <div>
        <h4>第三时间段</h4>
        <el-time-select
          placeholder="起始时间"
          v-model="startTime3"
          @focus="forbid"
          :editable="false"
          :picker-options="{
              start: endTime2,
              step: '00:15',
              end: '24:00'
            }"
          @change="changeTime($event,'4')"
        ></el-time-select>
        <el-time-select
          placeholder="结束时间"
          v-model="endTime3"
          @focus="forbid"
          :editable="false"
          :picker-options="{
            start: startTime3,
            step: '00:15',
            end: '24:00',
            minTime: startTime3
          }"
          @change="changeTime($event,'5')"
        ></el-time-select>
      </div>
      <el-button id="daysave" type="primary" @click="save()" class="sethumibut">保存</el-button>
      <span id="savesd">系统正在重新配置时间，请<span id="saves">{{this.saveNum}}</span>秒后再操作</span>
    </el-tab-pane>
    <el-tab-pane label="按周设定" name="second">
      <el-radio v-model="radio" label="0" @change="radioChange">周一</el-radio>
      <el-radio v-model="radio" label="1" @change="radioChange">周二</el-radio>
      <el-radio v-model="radio" label="2" @change="radioChange">周三</el-radio>
      <el-radio v-model="radio" label="3" @change="radioChange">周四</el-radio>
      <el-radio v-model="radio" label="4" @change="radioChange">周五</el-radio>
      <el-radio v-model="radio" label="5" @change="radioChange">周六</el-radio>
      <el-radio v-model="radio" label="6" @change="radioChange">周日</el-radio>
      <div>
        <h4>第一时间段</h4>
        <el-time-select
          placeholder="起始时间"
          v-model="startTime1_1"
          :editable="false"
          :picker-options="{
              start: '00:00',
              step: '00:15',
              end: '24:00'
            }"
          @change="changeTime2($event,'0')"
        ></el-time-select>
        <el-time-select
          placeholder="结束时间"
          v-model="endTime1_1"
          :editable="false"
          :picker-options="{
            start: '00:00',
            step: '00:15',
            end: '24:00',
            minTime: startTime1_1
          }"
          @change="changeTime2($event,'1')"
        ></el-time-select>
      </div>
      <div>
        <h4>第二时间段</h4>
        <el-time-select
          placeholder="起始时间"
          v-model="startTime2_1"
          :editable="false"
          :picker-options="{
              start: endTime1_1,
              step: '00:15',
              end: '24:00'
            }"
          @change="changeTime2($event,'2')"
        ></el-time-select>
        <el-time-select
          placeholder="结束时间"
          v-model="endTime2_1"
          :editable="false"
          :picker-options="{
            start: startTime2_1,
            step: '00:15',
            end: '24:00',
            minTime: startTime2_1
          }"
          @change="changeTime2($event,'3')"
        ></el-time-select>
      </div>
      <div>
        <h4>第三时间段</h4>
        <el-time-select
          placeholder="起始时间"
          v-model="startTime3_1"
          :editable="false"
          :picker-options="{
              start: endTime2_1,
              step: '00:15',
              end: '24:00'
            }"
          @change="changeTime2($event,'4')"
        ></el-time-select>
        <el-time-select
          placeholder="结束时间"
          v-model="endTime3_1"
          :editable="false"
          :picker-options="{
            start: startTime3_1,
            step: '00:15',
            end: '24:00',
            minTime: startTime3_1
          }"
          @change="changeTime2($event,'5')"
        ></el-time-select>
      </div>
      <el-button id="daysave2" type="primary" @click="save2()" class="sethumibut sethumibut2">保存</el-button>
      <span id="savesd2">系统正在重新配置时间，请<span id="saves">{{this.saveNum}}</span>秒后再操作</span>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import $ from 'jquery';
export default {
  name: "humiSet",
  props: ["setdayauto","Humiserial"],
  inject: ['reload'],
  data() {
    return {
      activeName: "first",
      timeGetData2:'',
      //天
      startTime1: "",
      endTime1: "",
      startTime2: "",
      endTime2: "",
      startTime3: "",
      endTime3: "",
      //周
      startTime1_1: "",
      endTime1_1: "",
      startTime2_1: "",
      endTime2_1: "",
      startTime3_1: "",
      endTime3_1: "",
      activeNames: ["1"],
      radio: "0",
      choiceWeek: "0",
      chooseDay: [],
      dayArr: "",
      weekArr: "",
      dayArr2:"",
      newArr:'',
      // 计数器
      saveNum:10,
    };
  },
  created() {
    
        // setTimeout(() => {
        this.showDataTime(0);
        // }, 4000);
  },
  mounted() {
    // 定时器开启
    var timer = setInterval(() => {
      this.CountDown();
    }, 1000);
  },

  methods: {
    //计数器
    CountDown(){
      this.saveNum--
    },
    //禁止软键盘弹出
    forbid(){
      //禁止软键盘弹出
      document.activeElement.blur();
  },
    // 进入页面读取缓存回显示到页面中
    showDataTime(val) {
      console.log(val)
      this.$parent.getDataTime();
        // if(val == 0){
          setTimeout(() => {
            this.dayArr = this.setdayauto.slice(42,48)
            // console.log(this.dayArr)
            this.weekArr = this.setdayauto.slice(0, 42)
            // if(val == 1 ){
            //   this.backDay(1);
            // }else{
            //   this.backDay(0);
            // }
            this.backDay();
            this.backWeek();
          }, 4000);
        // }else{
        //   setTimeout(() => {
        //     this.dayArr = this.setdayauto.slice(42,48)
        //     // console.log(this.dayArr)
        //     this.weekArr = this.setdayauto.slice(0, 42)
        //     // if(val == 1 ){
        //     //   this.backDay(1);
        //     // }else{
        //     //   this.backDay(0);
        //     // }
        //     this.backDay();
        //     this.backWeek();
        //   }, 7000);
        // }
        
        console.log(this.setdayauto)
      
    },
    //分钟转换为 00:00 格式
    ChangeHourMinutestr(str) {
      if (str !== "0" && str !== "" && str !== null) {
        return (
          (Math.floor(str / 60).toString().length < 2
            ? "0" + Math.floor(str / 60).toString()
            : Math.floor(str / 60).toString()) +
          ":" +
          ((str % 60).toString().length < 2
            ? "0" + (str % 60).toString()
            : (str % 60).toString())
        );
      } else {
        return " ";
      }
    },
    // 按天设置开关机时间段
    changeTime(event, classname) {
      // 分钟小时转换位秒
      var time = event;
      // console.log(event)
      if(time == null){
        time = '00:00'
      }
      var hour = time.split(":")[0];
      var min = time.split(":")[1];
      var second = Number(hour * 3600) + Number(min * 60);
      if (classname == classname) {
        for (var index = classname; index < this.dayArr.length; index++) {
          if ((index - classname) % 6 == 0) {
            //this.dayArr[index].value = second / 60;
            this.dayArr[index].value = second ;

            //console.log(this.dayArr)
          }
          // 存
        }
      }
      //  console.log(this.dayArr)
    },
    // // 按天提交
    save() {
      // console.log('恒湿机时间回显'+this.Humiserial)
      this.newArr = '',
      this.newArr = this.dayArr
       for (let index = 0; index < this.newArr.length; index++) {
        this.newArr[index].value = this.newArr[index].value / 60
      }
      // this.newArr.push({id:83,value:1})
      // console.log(this.newArr)
      let o = {
        type: "setdev",
        deac: [
          {
            // dayauto: 1,
            serial: this.Humiserial,
            unit: this.newArr
          }
        ]
      };
      // console.log(o)
      
      this.$http.post(this.$baseUrl, o).then(res => {
        this.$message("正在修改，请稍后");
        $("#daysave").css("pointer-events","none")
        $("#savesd").css("display","block")
        $("#daysave").toggleClass('daysave');

        $("#daysave2").css("pointer-events","none")
        $("#savesd2").css("display","block")
        $("#daysave2").toggleClass('daysave');
        this.saveNum = 10;
        // this.showDataTime();
        setTimeout(() => {
          this.showDataTime();
          setTimeout(() => {
            this.$message("时间保存成功");
            $("#daysave").css("pointer-events","auto")
            $("#daysave").removeClass('daysave');
            $("#savesd").css("display","none")

            $("#daysave2").css("pointer-events","auto")
            $("#daysave2").removeClass('daysave');
            $("#savesd2").css("display","none")
          }, 7000);
        }, 3000);
      });
    },
    // 按周提交
    save2() {
      for (let index = 0; index < this.weekArr.length; index++) {
        this.weekArr[index].value = this.weekArr[index].value / 60
      }
      var newArr = this.weekArr
      // newArr.push({id:83,value:2})
        let o = {
        type: "setdev",
        deac: [
          {
            // dayauto: 2,
            serial: this.Humiserial,
            unit: newArr
          }
        ]
      };
      // console.log(o);
      this.$http.post(this.$baseUrl, o).then(res => {
        this.$message("正在修改，请稍后");
        $("#daysave").css("pointer-events","none")
        $("#savesd").css("display","block")
        $("#daysave").toggleClass('daysave');

        $("#daysave2").css("pointer-events","none")
        $("#savesd2").css("display","block")
        $("#daysave2").toggleClass('daysave');
        this.saveNum = 10;
        // this.showDataTime();
        setTimeout(() => {
          this.showDataTime();
          setTimeout(() => {
            this.$message("时间保存成功");
            $("#daysave").css("pointer-events","auto")
            $("#daysave").removeClass('daysave');
            $("#savesd").css("display","none");

            $("#daysave2").css("pointer-events","auto")
            $("#daysave2").removeClass('daysave');
            $("#savesd2").css("display","none")
          }, 7000);
        }, 3000);
      });
    },
    // // 选项卡切换功能
    handleClick(tab, event) {
      if (tab.name == "second") {
      this.backWeek();
      } else {
      }
    },
    // radio 选择周几
    radioChange(even) {
      this.choiceWeek = event.srcElement.value;
      this.backWeek();
    },
    // 按照周几来选择开关机时间
    changeTime2(event, classname) {
      // 取
      //console.log(this.choiceWeek);
      // 分钟小时转换位秒
      var time = event;
      if(time == null){
        time = '00:00'
      }
      var hour = time.split(":")[0];
      var min = time.split(":")[1];
      var second = Number(hour * 3600) + Number(min * 60);
      var weekNumber = this.choiceWeek * 6;
      var addNumber = parseInt(weekNumber) + 6;
      var arr = [];
      for (let index = weekNumber; index < addNumber; index++) {
        arr.push(index);
      }
      this.weekArr[arr[classname]].value = 0;

      this.weekArr[arr[classname]].value = second;
      // 存
      // console.log(this.weekArr)
    },
    //数据回显示 => 周
    backWeek(){
      this.chooseDay = [];
      //循环周数组赋缓存值
      // this.weekArr = warr;
      var weekNumber = this.choiceWeek * 6;
      var addNumber = parseInt(weekNumber) + 6;
      var arr = [];
      for (let index = weekNumber; index < addNumber; index++) {
        arr.push(index);
      }
      for (let index = 0; index < 6; index++) {
        var newSecond = this.weekArr[arr[index]].value / 60
        if(newSecond>=1440){
            newSecond = 1440
          }
        var settime = this.ChangeHourMinutestr(newSecond);
        if (settime == "00:00") {
          if (index == 0) {
            this.chooseDay.push(settime);
          } else {
            this.chooseDay.push("");
          }
        } else {
          this.chooseDay.push(settime);
        }
      }
      this.startTime1_1 = this.chooseDay[0];
      this.endTime1_1 = this.chooseDay[1];
      this.startTime2_1 = this.chooseDay[2];
      this.endTime2_1 = this.chooseDay[3];
      this.startTime3_1 = this.chooseDay[4];
      this.endTime3_1 = this.chooseDay[5];
    },
    // 数据回显示 => 天
    backDay () {
      this.chooseDay = []
      //console.log(this.dayArr)
        for (let index = 0; index < this.dayArr.length; index++) {
          // if(val == 1){
          //   var newSecond = this.dayArr[index].value
          // }else{
          //   var newSecond = this.dayArr[index].value / 60;
          // }
          var newSecond = this.dayArr[index].value / 60;
          if(newSecond>=1440){
            newSecond = 1440
          }
          //var newSecond = this.dayArr[index].value;
          var settime = this.ChangeHourMinutestr(newSecond);
          if (settime == "00:00") {
            if (index == 0) {
              this.chooseDay.push(settime);
            } else {
              this.chooseDay.push("");
            }
          } else {
            this.chooseDay.push(settime);
          }
        }
        this.startTime1 = this.chooseDay[0];
        this.endTime1 = this.chooseDay[1];
        this.startTime2 = this.chooseDay[2];
        this.endTime2 = this.chooseDay[3];
        this.startTime3 = this.chooseDay[4];
        this.endTime3 = this.chooseDay[5];
    }
   
  }
};
</script>
<style scoped>
h4 {
  margin-bottom: 10px;
  margin-top: 30px;
  font-size: 26px;
  color: #666;
}
.el-tabs--card > .el-tabs__header {
  border-bottom: none;
}
.el-input__inner{
  line-height: 50px;
  height: 50px;
  font-size: 26px;
}
/deep/ .el-tabs__item{
  font-size: 26px;
  line-height: 50px;
  height: 50px;
}
/deep/ .el-radio__inner{
  width: 25px;
  height: 25px;
}
/deep/ .el-radio__inner::after{
  width: 10px;
  height: 10px;
}
/deep/ .el-radio__label{
  font-size: 23px;
}
/deep/ .el-input--prefix .el-input__inner{
  font-size: 29px;
  height: 60px;
  padding-left: 40px;
  border: 1px solid #9f9fa0;
}
/deep/ .time-select .time-select-item{
  font-size: 22px !important;
}
/deep/ .el-radio__input {
    position: relative;
    top: -4px;
}
/deep/ .el-button{
  font-size: 21px;
  margin-top: 15px;
}
/deep/.el-tab-pane .daysave{
    background-color: #acaeb0 !important;
}
/deep/.el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 260px;
  font-size: 25px;
}
/deep/.el-date-editor.el-input .el-input__prefix {
  left: 10px
}
/deep/.el-date-editor.el-input .el-input__prefix .el-input__icon{
  line-height: 60px !important;
}
/deep/.el-date-editor.el-input .el-input__suffix .el-input__icon{
  line-height: 60px !important;
}
#savesd{
  display: none;
  float: left;
  margin-top: 27px;
  padding-left: 30px;
  font-size:18px;
}
#daysave{
    width: 90px;
    float: left;
}
#savesd2{
  display: none;
  float: left;
  margin-top: 27px;
  padding-left: 30px;
  font-size:18px;
}
#daysave2{
    width: 90px;
    float: left;
}
</style>

